<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<title>日程管理</title>
		<!-- <meta name="decorator" content="default" /> -->
		<link rel="stylesheet" href="${ctxStatic}/calendar/css/mainstructure.css"/>
		<link rel="stylesheet" href="${ctxStatic}/calendar/css/maincontent.css"/>
		<!-- Jquery and Jquery UI -->
		<script type="text/javascript" src="${ctxStatic}/calendar/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="${ctxStatic}/calendar/js/jquery-ui-1.8.6.custom.min.js"></script>
		<script type="text/javascript" src="${ctxStatic}/calendar/js/jquery-ui-timepicker-addon.js"></script>
		<link rel="stylesheet" href="${ctxStatic}/calendar/css/redmond/jquery-ui-1.8.1.custom.css"/>
		<!-- Jquery and Jquery UI -->
		<script src="${ctxStatic}/calendar/js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
		<script src="${ctxStatic}/calendar/js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>
		<link rel="stylesheet" href="${ctxStatic}/calendar/js/formValidator/css/validationEngine.jquery.css" type="text/css"/>
		<!-- FullCalender -->
		<link rel='stylesheet' type='text/css' href='${ctxStatic}/calendar/js/fullcal/css/fullcalendar.css' />
		<script type='text/javascript' src='${ctxStatic}/calendar/js/fullcal/fullcalendar.js'></script>
		<style type=text/css>
			#loading {
				TOP: 0px;
				RIGHT: 0px
			}
			.tooltip {
				PADDING-BOTTOM: 25px;
				PADDING-LEFT: 25px;
				WIDTH: 160px;
				PADDING-RIGHT: 25px;
				display: none;
				BACKGROUND: url(images/black_arrow.png);
				HEIGHT: 70px;
				COLOR: #fff;
				FONT-SIZE: 12px;
				PADDING-TOP: 25px;
				z-order: 100
			}
		</style>
	</head>
	<body>
		<div id=wrap>
			<script type=text/javascript>
				var selectdates = "";
				$(document).ready(function() {
					//公司与联系人二级联动
					$("#customerId").change(function(){
						$("#contactId option:not(:first)").remove();
						var custId = $(this).val();
						if(custId!=-1){
							$.ajax({
								type:"post",
								data:"custId="+custId,
								url:"${ctx}/crm/calendar/hycrmCalendar/customerContact",
								success:function(data){
									for(var i=0;i<data.length;i++){
										var cont = "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
										$("#contactId").append(cont);
									}
								}
							});
						}
					});
					$("#reserveformID").validationEngine({
						validationEventTriggers: "keyup blur", // 键盘按键触发验证
						openDebug: true
					});

					$("#start").timepicker({
						dateformat: 'yy-mm-dd',
						timeformat: 'HH:mm',
						hourMin: 0,
						hourMax: 23,
						hourGrid: 3,
						minuteGrid: 15
					});
					$("#end").timepicker({
						dateformat: 'yy-mm-dd',
						timeformat: 'HH:mm',
						hourMin: 0,
						hourMax: 23,
						hourGrid: 3,
						minuteGrid: 15
					});

					$("#addhelper").hide();

					$('#calendar').fullCalendar({
						header: {
							right: 'prev,next today',
							center: 'title',
							left: 'month,agendaWeek,agendaDay'
						},
						monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
						monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
						dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
						dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
						today: ["今天"],
						firstDay: 1,
						buttonText: {
							today: '今天',
							month: '月',
							week: '周',
							day: '日',
							prev: '上一月',
							next: '下一月'
						},
						theme: true,
						editable: true,
						allDaySlot: false,
						events: function(start, end, callback) {
							//在日历上显示日程
							var events = [];
							//id,start,end,customerId,customerName,status,content,contact_id,contactName,operate_man,operateName,title
							var json;
							if(null==$("#hiddenJson").html()){
								json = "";
							}else{
								json = JSON.parse($("#hiddenJson").html());
							}
							
							var addJson = {'editable':false,'allDay':false,'confcolor':'#ff3f3f','uid':1,'sid':1};
							//alert(addJson.uid);
							//alert(json.length);
							for (var i=0;i<json.length;i++) {
								var ajson = jQuery.extend(json[i],addJson);
								events.push(ajson);
							} 
							callback(events);
						},
						dayClick: function(date, allDay, jsEvent, view) {
							var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
							selectdates = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
							//点击日历某一天使两个级联选择默认为请选择
							$("#dept option:first").attr("selected","selected");
							$("#user option:not(:first)").remove();
							$("#customerId option:first").attr("selected","selected");
							$("#contactId option:not(:first)").remove();
							
							
							$("#selectDate").val("");
							$("#selectDate").val(selectdate);
							$("#reservebox").dialog({
								autoOpen: false,
								height: 450,
								width: 400,
								title: '添加日程' + selectdate,
								modal: true,
								position: "center",
								draggable: false,
								beforeClose: function(event, ui) {
									$.validationEngine.closePrompt("#meeting");
									$.validationEngine.closePrompt("#start");
									$.validationEngine.closePrompt("#end");
								},
								buttons: {
									"关闭": function() {
										$(this).dialog("close");
									},
									"保存": function() {
										//使用自己的ajax
										var startdatestr = $("#start").val();
										var enddatestr = $("#end").val();
										var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr);
										var enddate = $.fullCalendar.parseDate(selectdate + "T" + enddatestr);
										startdate = $.fullCalendar.formatDate(startdate, "yyyy-MM-dd HH:mm");
										enddate = $.fullCalendar.formatDate(enddate, "yyyy-MM-dd HH:mm");
										var mytitle = $("#title").val();
										var mycustomer = $("#customerId").val();
										var mycontact = $("#contactId").val();
										var myoperate = $("#user").val();
										//var mystatus = $("#status").val();
										var mycontent = $("#content").val();

										startHour = startdatestr.substring(0,startdatestr.indexOf(":"))
										startMin = startdatestr.substring(startdatestr.indexOf(":")+1)
										endHour = enddatestr.substring(0,enddatestr.indexOf(":"))
										endMin = enddatestr.substring(enddatestr.indexOf(":")+1)
										if(startHour>endHour){
											return false;
										}
										if(startHour==endHour){
											if(startMin>=endMin){
												return false;
											}
										}
										
										if(mytitle==""){
											return false;
										}
										if(myoperate==-1){
											myoperate='${fns:getUser().id}';
										}
										if(mycontent==""){
											return false;
										}
										if(mycustomer==-1){
											return false;
										}
										if(mycontact==-1){
											return false;
										}
										var postJson = {
											title:mytitle,
											start:startdate,
											end:enddate,
											customerId:mycustomer,
											contactId:mycontact,
											operateMan:myoperate,
											status:'未完成',
											content:mycontent
										}
										
										$.ajax({
											type:"post",
											data:postJson,
											url:"${ctx}/crm/calendar/hycrmCalendar/save",
											success:function(data){
												$(this).dialog("close");
												location.href="${ctx}/crm/calendar/hycrmCalendar/calendarView";
											}
										});
									}
								}
							});
							$("#reservebox").dialog("open");
							return false;
						},
						timeformat: 'HH:mm{ - HH:mm}',
						eventClick: function(event) {
							var fstart = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
							var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
							var schdata = {
								sid: event.sid,
								deleted: 1,
								uid: event.uid
							};

							$("#reserveinfo").dialog({
								autoOpen: false,
								height: 280,
								width: 400,
								modal: true,
								position: "center",
								draggable: false,
								buttons: {
									"close": function() {
										$(this).dialog("close");
									}
								}
							});

							if(1 == 1 || 2 == schdata.uid) {
								$("#reserveinfo").dialog("option", "buttons", {
									"关闭": function() {
										$(this).dialog("close");
									},

									"删除": function() {
										var answer = confirm("确认要删除吗？");
										if(answer){
											location.href="${ctx}/crm/calendar/hycrmCalendar/delete?id="+event.id;
										}
									}
								});
							}

							//var showtopic = '';


							$("#revdesc").html('<div style="font-weight:bold;color:#5383c2;border-bottom: 1px dotted #5383c2; padding: 3px 0px 3px;">' + '日程信息' + "</div>" + '<div style="padding: 10px 0px 3px">' + '<div style="width:128px;float:left;"><div style="background:#A4C3E3; text-align:left; padding:5px;color:#1d5987;font-weight:bold;font-size:12px">&nbsp;公司: '+ event.customerName +'<br/>联系人: '+event.contactName+'<br/>'+'执行人: '+event.operateName+ '</div></div><div style="float:right;width:220px; padding:0px ; margin:0px">' +"<textarea cols='30' rows='4' disabled='true'> 详细内容: "+ event.content +'</textarea>'+ '</div><div style="clear:both"></div></div>');

							$("#reserveinfo").dialog({
								title: fstart + "-" + fend + " " + event.title
							});

							$("#reserveinfo").dialog("open");
							return false;
						},
						loading: function(bool) {
							if(bool) $('#loading').show();
							else $('#loading').hide();
						},
						eventMouseover: function(calEvent, jsEvent, view) {
							var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
							var fend = $.fullCalendar.formatDate(calEvent.end, "HH:mm");
							$(this).attr('title', fstart + " - " + fend + " " + calEvent.title);
							$(this).css('font-weight', 'normal');
							$(this).tooltip({
								effect: 'toggle',
								cancelDefault: true
							});
						},
						eventMouseout: function(calEvent, jsEvent, view) {
							$(this).css('font-weight', 'normal');
						},
						eventRender: function(event, element) {
							var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
							var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
							// Bug in IE8
							//element.html('<a href=#>' + fstart + "-" +  fend + '<div style=color:#E5E5E5>' +  event.title + "</div></a>");
						},
						eventAfterRender: function(event, element, view) {
							var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
							var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
							//element.html('<a href=#><div>Time: ' + fstart + "-" +  fend + '</div><div>Room:' + event.confname + '</div><div style=color:#E5E5E5>Host:' +  event.fullname + "</div></a>");

							var confbg = '';
							if(event.confid == 1) {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							} else if(event.confid == 2) {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							} else if(event.confid == 3) {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							} else if(event.confid == 4) {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							} else if(event.confid == 5) {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							} else if(event.confid == 6) {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							} else {
								confbg = confbg + '<span class="fc-event-bg"></span>';
							}

							//var titlebg = '<span class="fc-event-conf" style="background:' + event.confcolor + '">' + event.confshortname + '</span>';

							/* if(event.repweeks > 0) {
								titlebg = titlebg + '<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>';
							} */

							if(view.name == "month") {
								var evtcontent = '<div class="fc-event-vert"><a>';
								evtcontent = evtcontent + confbg;
								evtcontent = evtcontent + '<span class="fc-event-titlebg">时间跨度: ' + fstart + " - " + fend + '</span>';
								evtcontent = evtcontent + '<span>日程名: ' + event.title + '</span>';
								evtcontent = evtcontent + '<span>公司: ' + event.customerName + '</span>';
								evtcontent = evtcontent + '</a><div class="ui-resizable-handle ui-resizable-e"></div></div>';
								element.html(evtcontent);
							} else if(view.name == "agendaWeek") {
								var evtcontent = '<a>';
								evtcontent = evtcontent + confbg;
								evtcontent = evtcontent + '<span class="fc-event-time">时间跨度: ' + fstart + "-" + fend + '</span>';
								evtcontent = evtcontent + '<span>日程名: ' + event.title + '</span>';
								evtcontent = evtcontent + '<span>公司: ' + event.customerName +'</span>';
								//evtcontent = evtcontent + '<span>' +  event.operateName + '</span>';
								evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrowthick-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';
								element.html(evtcontent);
							} else if(view.name == "agendaDay") {
								var evtcontent = '<a>';
								evtcontent = evtcontent + confbg;
								evtcontent = evtcontent + '<span class="fc-event-time">时间跨度: ' + fstart + " - " + fend + '</span>';
								evtcontent = evtcontent + '<span>日程名: ' + event.title + '</span>';
								evtcontent = evtcontent + '<span>公司: ' + event.customerName + '</span>';
								//evtcontent = evtcontent + '<span>执行人: ' + event.operateName + '</span>';
								
								//日试图显示内容长度————15
								var showcontent = '';
								if(event.content.length > 15) {
									showcontent = event.content.substring(0, 15) + '...';
								} else {
									showcontent = event.content;
								}
								
								evtcontent = evtcontent + '<span>日程内容: ' + showcontent + '</span>';
								evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';
								element.html(evtcontent);
							}
						},
						eventDragStart: function(event, jsEvent, ui, view) {
							ui.helper.draggable("option", "revert", true);
						},
						eventDragStop: function(event, jsEvent, ui, view) {},
						eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {

							if(1 == 1 || 2 == event.uid) {
								var schdata = {
									startdate: event.start,
									enddate: event.end,
									confid: event.confid,
									sid: event.sid
								};
							} else {
								revertFunc();
							}

						},
						eventResizeStart: function(event, jsEvent, ui, view) {

							//alert('resizing');

						},
						eventResize: function(event, dayDelta, minuteDelta, revertFunc) {

							if(1 == 1 || 2 == event.uid) {
								var schdata = {
									startdate: event.start,
									enddate: event.end,
									confid: event.confid,
									sid: event.sid
								};

							} else {
								revertFunc();
							}

						}

					});

					//goto date function
					if($.browser.msie) {
						$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
					} else {
						$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
					}

					$("#selecteddate").datepicker({
						dateformat: 'yy-mm-dd',
						beforeShow: function(input, instant) {
							setTimeout(
								function() {
									$('#ui-datepicker-div').css("z-index", 15);
								}, 100
							);
						}
					});

					$("#selectdate").click(function() {
						var selectdstr = $("#selecteddate").val();
						var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");
						$('#calendar').fullCalendar('gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
					});

				});

				function validate2time() {
					//alert("debug");

					var cresult = compare2time($("#start").val(), $("#end").val());
					if(cresult == 0) {
						return false;
					} else if(cresult == 1) {
						$.validationEngine.closePrompt("#start");
						return true;
					}

				}
				//时间验证
				function compare2time(startTime,endTime){
					if(endTime==""){
						return 1;
					}
					startHour = startTime.substring(0,startTime.indexOf(":"))
					startMin = startTime.substring(startTime.indexOf(":")+1)
					endHour = endTime.substring(0,startTime.indexOf(":"))
					endMin = endTime.substring(startTime.indexOf(":")+1)
					if(startHour<endHour){
						return 1;
					}
					if(startHour>endHour){
						return 0;
					}
					if(startHour==endHour){
						if(startMin>=endMin){
							return 0;
						}else{
							return 1;
						}
					}
				}
				//部门员工级联
				function ajaxdept() {
					$("#user option:not(:first)").remove();
					//$("#user").val("-1");
					var deptId = $("#dept").val();
					$.ajax({
						type : "post",
						url : "${ctx}/crm/calendar/hycrmCalendar/selectdate",
						data : {'deptId':deptId,'selectdate':selectdates},
						success : function(data) {
							for ( var i = 0; i < data.length; i++) {
								$("#user").append(
										"<option value='"+data[i].id+"'>"
												+ data[i].name + "</option>");
							}
						}
					});
					//$("#user option:first").prop("selected", 'selected');
					//$("#s2id_user").find("a:first").find("span:first").html("请选择");  
					
				}
			</script>
			<div id="calendar"></div>
			<div id="reserveinfo" title="Details">
				<div id="revtitle"></div>
				<div id="revdesc"></div>
			</div>
			<div style="display:none;" id="reservebox" title="添加日程">
				<form id="reserveformID" method="post" action="${ctx}/crm/calendar/hycrmCalendar/save">
					<div class="rowElem">
						<label>日程名称:</label>
						<input id="title" name="title" />
					</div>
					<div class="rowElem">
						<label>开始时间:</label>
						<input id="start" class="validate[required,funcCall[validate2time]]" name="start"/>
					</div>
					<div class="rowElem">
						<label>结束时间:</label>
						<input id="end" class="validate[required,funcCall[validate2time]]" name="end"/>
					</div>
					<div class="rowElem">
						<label>联系目标:</label>
						<select name="custmerId" id="customerId">
							<option value="-1">请选择</option>
							<c:forEach items="${customers}" var="customer">
							<option value="${customer.id}">${customer.name}</option>
							</c:forEach>
						</select>
					</div>
					<div class="rowElem" style="padding-left:105px;">
						<select name="contactId" id="contactId">
							<option value="-1">请选择</option>
						</select>
					</div>
					<div class="rowElem">
						<label>日程分配:</label>
						<select name="dept" id="dept" onchange="ajaxdept()">
							<option value="-1">请选择</option>
							<c:forEach items="${dept}" var="dept">
								<option value="${dept.id}">${dept.name}</option>
							</c:forEach>
						</select>
					</div>
					<div class="rowElem">
						<label></label>
						<select name="operateId" id="user">
							<option value="-1">请选择</option>
						</select>
					</div>
					<div class="rowElem">
						<label>任务详情:</label>
						<textarea id="content" rows="4" cols="38" name="content"></textarea>
					</div>

					<div id="addhelper" class="ui-widget">
						<div style="padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px"class="ui-state-error ui-corner-all">
							<div id="addresult"></div>
						</div>
					</div>
				</form>
			</div>
		</div>
	<p style="display:none" id="hiddenJson">${json}</p>
	</body>

</html>